 k<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <div class="filter-item">
        <el-input v-model="supplierQuery.param.supplierName" placeholder="供应商名称" style="width: 200px;" clearable />
        <el-input v-model="supplierQuery.param.contactsUser" placeholder="供应商联系人" style="width: 200px;margin-left:10px;" clearable />
        <el-button type="primary" icon="el-icon-search" @click="handleSupplierFilter" style="margin-left:10px;">
          查询
        </el-button>
        <el-button v-if="add_supplier_button_status" type="primary" icon="el-icon-plus" @click="handleSupplierAdd" style="margin-left:10px;">
          增加
        </el-button>
      </div>
    </div>

    <el-table :data="supplierLists" style="width: 100%" stripe>
      <el-table-column v-if="false" prop="id" />
      <el-table-column prop="supplierName" label="供应商名称" show-overflow-tooltip />
      <el-table-column prop="supplierAddress" label="供应商地址" show-overflow-tooltip />
      <el-table-column prop="contactsUser" label="联系人" show-overflow-tooltip />
      <el-table-column prop="contactsPhone" label="联系人电话" show-overflow-tooltip />
      <el-table-column label="操作" fixed="right" width="300">
        <template slot-scope="scope">
          <el-button size='mini' icon="el-icon-document" @click="handleSupplierGoodLists(scope.row)">原料</el-button>
          <el-button v-if="upd_supplier_button_status" size='mini' icon="el-icon-edit" type="primary" @click="handleSupplierEdit(scope.row)">修改</el-button>
          <el-button v-if="del_supplier_button_status" size='mini' icon="el-icon-delete" type="danger" @click="handleSupplierDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="supplierQuery.page" :page-sizes="[10, 25, 50, 100]" :page-size="supplierQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="supplierTotal">
    </el-pagination>

    <el-dialog :title="operationMap[supplierDialogStatus]" :visible.sync="supplierDialogFormVisible" :close-on-click-modal="false" width="45%">
      <el-form :rules="supplierFromRules" :model="supplierForm" ref="supplierForm">
        <el-form-item label="供应商名称" prop="supplierName">
          <el-input v-model="supplierForm.supplierName" />
        </el-form-item>
        <el-form-item label="供应商地址" prop="supplierAddress">
          <el-input v-model="supplierForm.supplierAddress" />
        </el-form-item>
        <el-form-item label="联系人" prop="contactsUser">
          <el-input v-model="supplierForm.contactsUser" />
        </el-form-item>
        <el-form-item label="联系人电话" prop="contactsPhone">
          <el-input v-model="supplierForm.contactsPhone" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button @click="handleSupplierCancel">取消</el-button>
        <el-button v-if="supplierDialogStatus==='create'" type="primary" @click="handleSupplierCreate">确定</el-button>
        <el-button v-if="supplierDialogStatus==='update'" type="primary" @click="handleSupplierUpdate">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="原料列表" :visible.sync="supplierGoodsDialogFormVisible" :close-on-click-modal="false" width="65%">
      <div>
        <el-input v-model="supplierGoodQuery.param.supplierGoodsName" placeholder="原料名称" clearable style="width: 200px;" />
        <el-button type="primary" icon="el-icon-search" @click="handleSupplierGoodFilter" style="margin-left:10px;">
          查询
        </el-button>
        <el-button v-if="add_supplier_goods_button_status" type="primary" icon="el-icon-plus" @click="handleSupplierGoodAdd" style="margin-left:10px;">
          增加
        </el-button>
      </div>

      <el-table :data="supplierGoodLists" style="width: 100%" stripe>
        <el-table-column v-if="false" prop="id" />
        <el-table-column prop="goodsName" label="原料名称" show-overflow-tooltip />
        <el-table-column prop="goodsPrice" label="原料单价" show-overflow-tooltip />
        <el-table-column prop="offerDate" label="报价日期" show-overflow-tooltip />
        <el-table-column prop="deliveryCycle" label="送货周期（天）" show-overflow-tooltip />
        <el-table-column label="操作" fixed="right" width="200" v-if="upd_supplier_goods_button_status || del_supplier_goods_button_status">
          <template slot-scope="scope">
            <el-button v-if="upd_supplier_goods_button_status" size='mini' icon="el-icon-edit" type="primary" @click="handleSupplierGoodEdit(scope.row)">修改</el-button>
            <el-button v-if="del_supplier_goods_button_status" size='mini' icon="el-icon-delete" type="danger" @click="handleSupplierGoodDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleGoodSizeChange" @current-change="handleGoodCurrentChange" :current-page="supplierGoodQuery.page" :page-sizes="[10, 25, 50, 100]" :page-size="supplierGoodQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="supplierGoodTotal">
      </el-pagination>

      <el-dialog :title="operationMap[supplierGoodModifyDialogStatus]" :visible.sync="supplierGoodModifyDialogFormVisible" :close-on-click-modal="false" width="45%" append-to-body>
        <el-form :rules="supplierGoodFromRules" :model="supplierGoodForm" ref="supplierGoodForm" label-position="right" label-width="120px">
          <el-form-item label="原料名称" prop="goodsName">
            <el-input v-model="supplierGoodForm.goodsName" />
          </el-form-item>
          <el-form-item label="原料单价" prop="goodsPrice">
            <el-input v-model="supplierGoodForm.goodsPrice" />
          </el-form-item>
          <el-form-item label="报价日期" prop="offerDate">
            <el-date-picker type="date" v-model="supplierGoodForm.offerDate" value-format="yyyy-MM-dd" clearable />
          </el-form-item>
          <el-form-item label="送货周期（天）" prop="deliveryCycle">
            <el-input type="number" v-model="supplierGoodForm.deliveryCycle" />
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer" style="text-align:center;">
          <el-button @click="handleSupplierGoodsCancel">取消</el-button>
          <el-button v-if="supplierGoodModifyDialogStatus==='create'" type="primary" @click="handleSupplierGoodCreate">确定</el-button>
          <el-button v-if="supplierGoodModifyDialogStatus==='update'" type="primary" @click="handleSupplierGoodUpdate">确定</el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import {
  getSuppliers, addSupplier, updSupplier, delSupplier
} from '@/api/supplierInfo'

import {
  getSupplierGoods, addSupplierGood, updSupplierGood, delSupplierGood
} from '@/api/supplierGoodInfo'

export default {
  name: 'supplierInfo',
  data() {
    var validateDouble = (rule, value, callback) => {
      if (value === undefined) {
        callback();
      }
      if (value < 0 || value >= 1000000) {
        callback(new Error('请输入0 至 999999.99'));
      }
      callback();
    };
    return {
      operationMap: {
        create: "增加",
        update: "修改"
      },
      supplierQuery: {
        page: 1,
        size: 10,
        param: {
          supplierName: undefined,
          contactsUser: undefined
        }
      },
      supplierLists: [],
      supplierTotal: 0,
      supplierDialogStatus: "",
      supplierDialogFormVisible: false,
      supplierForm: {
        id: undefined,
        supplierName: undefined,
        supplierAddress: undefined,
        contactsUser: undefined,
        contactsPhone: undefined
      },
      supplierFromRules: {
        supplierName: [
          { required: true, message: "请填写供应商名称", trigger: "blur" },
          { min: 1, max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur' }
        ],
        supplierAddress: [
          { min: 0, max: 50, message: '长度在 0 到 50 个字符', trigger: 'blur' }
        ],
        contactsUser: [
          { min: 0, max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur' }
        ],
        contactsPhone: [
          { min: 0, max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur' }
        ]
      },

      supplierGoodQuery: {
        page: 1,
        size: 10,
        param: {
          supplierId: undefined,
          supplierGoodsName: undefined
        }
      },
      supplierGoodLists: [],
      supplierGoodTotal: 0,
      supplierGoodsDialogFormVisible: false,
      supplierGoodModifyDialogStatus: "",
      supplierGoodModifyDialogFormVisible: false,
      supplierGoodForm: {
        id: 0,
        supplierId: 0,
        goodsName: undefined,
        goodsPrice: undefined,
        offerDate: undefined,
        deliveryCycle: undefined
      },
      supplierGoodFromRules: {
        goodsName: [
          { required: true, message: "请填写原料名称", trigger: "blur" },
          { min: 1, max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur' }
        ],
        goodsPrice: [
          { validator: validateDouble, trigger: 'blur' }
        ]
      },
      successCode: 20000,

      add_supplier_button_status: false,
      upd_supplier_button_status: false,
      del_supplier_button_status: false,
      add_supplier_goods_button_status: false,
      upd_supplier_goods_button_status: false,
      del_supplier_goods_button_status: false,
    }
  },
  created() {
    this.handleSupplierFilter();

    if (this.elements['add_supplier']) {
      this.add_supplier_button_status = true;
    }
    if (this.elements['upd_supplier']) {
      this.upd_supplier_button_status = true;
    }
    if (this.elements['del_supplier']) {
      this.del_supplier_button_status = true;
    }
    if (this.elements['add_supplier_goods']) {
      this.add_supplier_goods_button_status = true;
    }
    if (this.elements['upd_supplier_goods']) {
      this.upd_supplier_goods_button_status = true;
    }
    if (this.elements['del_supplier_goods']) {
      this.del_supplier_goods_button_status = true;
    }

  },
  computed: {
    ...mapGetters(["elements"])
  },
  methods: {
    handleSupplierFilter() {
      this.supplierQuery.page = 1;
      this.getSupplierLists();
    },
    getSupplierLists() {
      getSuppliers(this.supplierQuery).then(resp => {
        if (resp.code === this.successCode) {
          this.supplierLists = resp.datas.datas;
          this.supplierTotal = resp.datas.total;
        }
      })
    },
    handleSizeChange(val) {
      this.supplierQuery.size = val;
      this.getSupplierLists();
    },
    handleCurrentChange(val) {
      this.supplierQuery.page = val;
      this.getSupplierLists();
    },
    handleSupplierAdd() {
      this.resetSupplierForm();
      this.supplierDialogFormVisible = true;
      this.supplierDialogStatus = 'create';
    },
    handleSupplierCreate() {
      this.$refs['supplierForm'].validate(valid => {
        if (!valid) {
          return false;
        }
        addSupplier(this.supplierForm).then(resp => {
          if (resp.code === this.successCode) {
            this.$notify({
              title: "成功",
              message: "增加成功",
              type: "success",
              duration: 2000
            });
            this.resetSupplierForm();
            this.getSupplierLists();
          }
        });
      });
    },
    handleSupplierEdit(row) {
      this.resetSupplierForm();
      this.supplierDialogFormVisible = true;
      this.supplierDialogStatus = 'update';
      this.$nextTick(() => {
        this.supplierForm = {
          id: row.id,
          supplierName: row.supplierName,
          supplierAddress: row.supplierAddress,
          contactsUser: row.contactsUser,
          contactsPhone: row.contactsPhone
        }
      });
    },
    handleSupplierUpdate() {
      this.$refs['supplierForm'].validate(valid => {
        if (!valid) {
          return false;
        }
        updSupplier(this.supplierForm).then(resp => {
          if (resp.code === this.successCode) {
            this.$notify({
              title: "成功",
              message: "增加成功",
              type: "success",
              duration: 2000
            });
            this.resetSupplierForm();
            this.getSupplierLists();
          }
        });
      });
    },
    handleSupplierDelete(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delSupplier(row.id).then(resp => {
          if (resp.code === this.successCode) {
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000
            });
          }
          else {
            this.$notify({
              title: "失败",
              message: "删除失败",
              type: "success",
              duration: 2000
            });
          }
          this.getSupplierLists();
        });
      });
    },
    handleSupplierCancel() {
      this.resetSupplierForm();
    },
    resetSupplierForm() {
      this.supplierDialogFormVisible = false;
      this.supplierDialogStatus = '';
      if (this.$refs['supplierForm']) {
        this.$refs['supplierForm'].resetFields();
      }
    },

    handleSupplierGoodLists(row) {
      this.supplierGoodQuery.param.supplierId = row.id;
      this.supplierGoodQuery.page = 1;
      this.getSupplierGoodLists();
      this.supplierGoodsDialogFormVisible = true;
    },
    getSupplierGoodLists() {
      getSupplierGoods(this.supplierGoodQuery).then(resp => {
        if (resp.code === this.successCode) {
          this.supplierGoodLists = resp.datas.datas;
        }
      });
    },
    handleSupplierGoodFilter() {
      this.supplierGoodQuery.page = 1;
      this.getSupplierGoodLists();
    },
    handleSupplierGoodAdd() {
      this.resetSupplierGoodForm();
      this.supplierGoodModifyDialogFormVisible = true;
      this.supplierGoodModifyDialogStatus = "create";
    },
    handleSupplierGoodCreate() {
      this.$refs['supplierGoodForm'].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.supplierGoodForm.supplierId = this.supplierGoodQuery.param.supplierId;
        addSupplierGood(this.supplierGoodForm).then(resp => {
          if (resp.code === this.successCode) {
            this.$notify({
              title: "成功",
              message: "增加成功",
              type: "success",
              duration: 2000
            });
            this.resetSupplierGoodForm();
            this.getSupplierGoodLists();
          }
        });
      });
    },
    handleSupplierGoodEdit(row) {
      this.resetSupplierGoodForm();
      this.supplierGoodModifyDialogFormVisible = true;
      this.supplierGoodModifyDialogStatus = "update";
      this.$nextTick(() => {
        this.supplierGoodForm = {
          id: row.id,
          supplierId: this.supplierGoodQuery.param.supplierId,
          goodsName: row.goodsName,
          goodsPrice: row.goodsPrice,
          offerDate: row.offerDate,
          deliveryCycle: row.deliveryCycle
        }
      })
    },
    handleSupplierGoodUpdate() {
      this.$refs['supplierGoodForm'].validate((valid) => {
        if (!valid) {
          return false;
        }
        updSupplierGood(this.supplierGoodForm).then(resp => {
          if (resp.code === this.successCode) {
            this.$notify({
              title: "成功",
              message: "增加成功",
              type: "success",
              duration: 2000
            });
            this.resetSupplierGoodForm();
            this.getSupplierGoodLists();
          }
        });
      });
    },
    handleSupplierGoodDelete(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delSupplierGood(row.id).then(resp => {
          if (resp.code === this.successCode) {
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000
            });
          }
          else {
            this.$notify({
              title: "失败",
              message: "删除失败",
              type: "success",
              duration: 2000
            });
          }
          this.getSupplierGoodLists();
        });
      });
    },
    handleGoodSizeChange(val) {
      this.supplierGoodQuery.size = val;
      this.getSupplierGoodLists();
    },
    handleGoodCurrentChange(val) {
      this.supplierGoodQuery.page = val;
      this.getSupplierGoodLists();
    },
    handleSupplierGoodsCancel() {
      this.resetSupplierGoodForm();
    },
    resetSupplierGoodForm() {
      this.supplierGoodModifyDialogFormVisible = false;
      this.supplierGoodModifyDialogStatus = "";
      if (this.$refs['supplierGoodForm']) {
        this.$refs['supplierGoodForm'].resetFields();
      }
    }
  }
}
</script>